<template>
  <div id="app">
    <!-- 头部 -->
    <div class="head">
      <!-- <router-view></router-view> -->
    </div>

    <!-- 中间内容区域 -->
    <div class="center">
      <router-view></router-view>
    </div>

    <!-- 底部导航栏 -->
    <footer>
      <nav-bar :list="list" ref="nav" />
    </footer>
  </div>
</template>
<script>
import NavBar from "../components/Navbar";
export default {
  data() {
    return {
      currentIndex: 0,
      list: [
        {
          link: "/community",
          name: "社区",
          img: "https://www.hualigs.cn/image/6037a44d72a81.jpg",
          imgs: "https://www.hualigs.cn/image/6037a4708b103.jpg"
        },
        {
          link: "/chatroom",
          name: "聊天室",
          img: "https://www.hualigs.cn/image/6037a5b862fd4.jpg",
          imgs: "https://www.hualigs.cn/image/6037a5b863dc0.jpg"
        },
        {
          link: "/information",
          name: "消息",
          img: "https://www.hualigs.cn/image/6037a5b8643e9.jpg",
          imgs: "https://www.hualigs.cn/image/6037a5b8619f7.jpg"
        },
        {
          link: "/admin",
          name: "我的",
          img: "https://www.hualigs.cn/image/6037a4af56f0e.jpg",
          imgs: "https://www.hualigs.cn/image/6037a4b11b2f2.jpg"
        }
      ]
    };
  },
  sockets: {
    receiveMsg(data) {
      console.log(data);
      let datas = this.$store.state.userinfo.userList;
      // console.log(datas);
      var flag = true;
      if (datas.length === 0) {
        this.$store.commit("setuserList", data);
      } else {
        for (let i = 0; i < datas.length; i++) {
          // console.log(datas[i]);
          if (datas[i].userid === data.userid) {
            datas[i].content = data.content;
            // console.log("第二次发");
            flag = false;
            break;
          }
        }
        if (flag === true) {
          this.$store.commit("setuserList", data);
          // console.log("第一次发");
        }
      }
    }
  },
  components: {
    NavBar
  },
  created() {
    this.$socket.open();
    console.log(this.$socket.id, "---全局获取---");
    // 全局获取并进行设置

    this.$store.commit("setsocketID", this.$socket.id);
    console.log(this.$store.state.socketID);
  },
  mounted() {
    // console.log(this.$socket.id,"------------------------------全局获取------------------------------");
    // 全局获取并进行设置
    this.$store.commit("setsocketID", this.$socket.id);
  },
  methods: {
    barClick(index) {
      this.currentIndex = index;
    }
  }
};
</script>
<style scoped>
.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f0eff5;
}
</style>
